<template>
  <div id="headers">
    <div class="header_logo">
      <img @click="hanleGohome" class="logo" src="../../assets/img/logo.png" alt="">
      <span v-if="headerInfo">
        <span>TGAME</span>
        <span>{{this.tgame.amount}}</span>
      </span>
      <span v-if="headerInfo">
        <span>TRX</span>
        <span>{{balance}}</span>
      </span>
      <div class="lang">
        <div @click="handleLangvisible" :class="langFlag?'lang-box active':'lang-box'">
          <img v-if="language" :src="language.picture" alt="">
        </div>
        <ul class="lang-dropdown" v-if="langFlag">
          <li v-for="(list,index) in lang" :key="index" @click="handleLang(list)"><img :src="list.picture" alt="">
          </li>
        </ul>
      </div>
      <div class="logo_right">
        <b @click="checkShow" class="iconfont">&#xe602;</b>
      </div>
    </div>
    <div v-if="headerShow" class="nav_list">
      <ul v-if="headerInfo">
        <li @click="hanleGohome">
          <div>
            <img src="../../assets/img/icon01.png" alt="">
          </div>
          <span>{{headerInfo.slots}}</span>
        </li>
        <li @click="handleJump('notice')">
          <div>
            <img src="../../assets/img/icon02.png" alt="">
          </div>
          <span>{{headerInfo.announcement}}</span>
        </li>
        <li @click="handleJump('invitefriends')">
          <div>
            <img src="../../assets/img/icon03.png" alt="">
          </div>
          <span>{{headerInfo.invitefriends}}</span>
        </li>
        <li @click="modelHandleJump(3)">
          <div>
            <img src="../../assets/img/icon04.png" alt="">
          </div>
          <span>{{headerInfo.mining}}</span>
        </li>
        <li @click="openUrl(headerInfo.pdfUrl)">
          <div>
            <img src="../../assets/img/icon05.png" alt="">
          </div>
          <a :href="headerInfo.pdfUrl" style="color: #fff;">{{headerInfo.introduce}}</a>
        </li>
        <li @click="modelHandleJump(2)">
          <div>
            <img src="../../assets/img/icon06.png" alt="">
          </div>
          <span>{{headerInfo.videoName}}</span>
        </li>
        <li @click="handleJump('')">
          <div>
            <img src="../../assets/img/icon07.png" alt="">
          </div>
          <a href="https://t.me/joinchat/LzxFmxZSMDcCbnaNP5mhpQ" style="color: #fff;">{{headerInfo.telegtam}}</a>
        </li>
        <li @click="handleJump('')">
          <div>
            <img src="../../assets/img/icon08.png" alt="">
          </div>
          <a href="https://twitter.com/TRONGAME8" style="color: #fff;">{{headerInfo.twitter}}</a>
        </li>
        <li @click="modelHandleJump(1)">
          <div>
            <img src="../../assets/img/icon09.png" alt="">
          </div>
          <span>{{headerInfo.WeChat}}</span>
        </li>
      </ul>
    </div>
    <van-popup v-model="model" v-if="headerInfo">
      <div v-show="headerIndex===1" class="weixin">
        <img src="../../assets/img/erweima.jpg" alt="">
        <!--<span>保存二维码</span>-->
        <b class="close" @click="checkModel">{{headerInfo.close}}</b>
      </div>
      <div v-show="headerIndex===2" class="video_play">
        <video width='' height='' controls='controls' id='video'>
          <source src='http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/vedio.mp4' type='video/mp4'>
        </video>
        <b class="close" @click="checkModel">{{headerInfo.close}}</b>
      </div>
      <div v-show="headerIndex===3" class="mining">
        <h4 v-if="miningData">{{miningData.title}}</h4>
        <span v-if="miningData">{{miningData.content}}</span>
        <div class="progress-bar">
          <!--<span style="width: 69.58333%;"></span>-->
          <span v-if="miningData" :style="{'width':(miningData.amount/miningData.topAmount)*100+'%'}"></span>
          <!--<p>23000001.00219/240000000</p>-->
          <p v-if="miningData">{{miningData.amount}}/{{miningData.topAmount}}</p>
        </div>
        <!--<p>下个挖矿阶段：3-5(每投注1240.0000TRX获得1.0000TGAME)</p>-->
        <p v-if="miningData">{{miningData.contentNext}}</p>
        <p v-if="miningInfo">{{miningInfo.balance}}{{this.tgame.award}}</p>
        <input class="draw-amount" type="number" :placeholder="miningInfo.waring" v-model="drawAmount">
        <span class="btn" @click="draw()">{{miningInfo.btn}}</span>
        <p v-if="miningInfo">{{miningInfo.tips}}</p>
        <b class="close" @click="checkModel">{{headerInfo.close}}</b>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {Popup} from 'vant'
  import {mapGetters} from 'vuex'
  import Api from '@/axios'

  export default {
    name: 'headers',
    data() {
      return {
        model: false,
        headerIndex: 3,
        headerShow: false,
        miningData: null,
        langFlag: false,
        userType: 0, // 0未登录，1已登录 2，有插件未登录
        userName: '', // 用户名
        currentIndex: 0,
        pluginVisible: false,
        miningVisible: false,
        videoVisible: false, // 视频
        tronWeb: null, // 浏览器插件对象
        contract: null,
        balance: 0, // 余额
        energy: 0, // 能量
        bandwidth: 0, // 带宽
        energyLimit: '', // 可用能量
        energyUsed: '', // 可用能量
        tgame: {},
        lang: [
          {
            lang: 'Chinese',
            name: '中文',
            picture: 'https://www.artup.com/img/mp4/china.png'
          },
          {
            lang: 'English',
            name: 'English',
            picture: 'https://www.artup.com/img/mp4/Britain.png'
          }
        ],
        currentLang: {
          lang: 'Chinese',
          name: '中文',
          picture: 'https://www.artup.com/img/mp4/china.png'
        }
      }
    },
    computed: {
      ...mapGetters({
        headerInfo: 'headerInfo',
        language: 'language',
        userInfo: 'userInfo',
        miningInfo: 'miningInfo'
      })
    },
    methods: {
      freshUserInfo() {
        // 拿到用户地址
        let vm = this
        let code = vm.tronWeb.defaultAddress.base58
        vm.$store.commit('setUserCode', code)
        vm.userName = code.substring(0, 5) + '...' + code.substr(code.length - 5)
        vm.tronWeb.trx.getUnconfirmedAccount(code).then(res => { // 拿到余额
          vm.balance = (res.balance / 1000000).toFixed(2) // TRX
          console.info('余额', vm.balance)
        })
        // 带宽，能量
        vm.tronWeb.trx.getAccountResources(code).then(res => { // 拿到余额
          console.log(res)
          vm.energyLimit = res.EnergyLimit ? res.EnergyLimit : 0 // 可用能量
          console.info(vm.energyLimit)
          vm.energyUsed = res.EnergyUsed ? res.EnergyUsed : 0 // 已用能量，无对象为0
          console.info(vm.energyUsed)
          let netLimit = res.NetLimit ? res.NetLimit + res.freeNetLimit : res.freeNetLimit // 总带宽
          let freeNetUsed = res.freeNetUsed ? res.freeNetUsed : 0
          let netUsed = res.NetUsed ? res.NetUsed + freeNetUsed : freeNetUsed // 已用带宽
          if (vm.energyLimit + vm.energyUsed !== 0) { // 已用能量
            vm.energy = ((vm.energyUsed / vm.energyLimit) * 100).toFixed(2)
            console.log('已用能量', vm.energyUsed / vm.energyLimit)
          } else {
            vm.energy = 0
          }
          vm.bandwidth = ((netUsed / netLimit) * 100).toFixed(2) // 已用带宽
        })
        this.getInformation(code)
      },
      getInformation(code) {
        console.log(code)
        let param = {
          inviterAddress: code || '' // 邀请者地址
        }
        Api.getInfo(param).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.tgame = result.data
          }
        })
      },
      openUrl(url) {
        console.log(url)
        if (url) window.open = url
      },
      getminingData() {
        Api.miningInfos().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.miningData = result.data
          }
        })
      },
      handleLangvisible() {
        this.langFlag = !this.langFlag
      },
      // 语言切换
      handleLang(data) {
        let currentLang = null
        if (data) {
          currentLang = data
        } else {
          currentLang = {
            lang: 'Chinese',
            name: '中文',
            picture: 'https://www.artup.com/img/mp4/china.png'
          }
        }
        this.langFlag = false
        this.$store.commit('handleChangelang', currentLang)
        sessionStorage.setItem('lang', JSON.stringify(currentLang))
      },
      modelHandleJump(index) { // 弹出弹窗
        if (index) {
          this.checkShow()
          this.checkModel()
          this.headerIndex = index
        }
        if (index === 3) {
          this.getminingData()
        }
      },
      checkModel() {
        this.model = !this.model
      },
      //   handleExit() {
      //     this.headerShow = false
      //     this.$store.commit('handleClearUserinfo')
      //     this.$router.push({
      //       path: '/'
      //     })
      //   },
      handleJump(index) {
        // if (!index) {
        //   localStorage.setItem('language', 0)
        // }
        // if (index === 'en/home') {
        //   localStorage.setItem('language', 1)
        // }
        // this.headerShow = false
        if (index) {
          this.checkShow()
          this.$router.push({
            path: '/' + index
          })
        }
      },
      hanleGohome() {
        this.headerShow = false
        this.$router.push({
          path: '/'
        })
      },
      checkShow() {
        this.langFlag = false
        this.headerShow = !this.headerShow
      },
      draw() {
        return false
      }
    },
    mounted() {
      let vm = this
      let tries = 0
      const timer = setInterval(() => {
        if (tries >= 20) {
          vm.userType = 0
          vm.$store.commit('setUserType', 0)
          clearInterval(timer)
          return
        }
        if (!window.tronWeb) {
          return tries++
        } else {
          vm.tronWeb = window.tronWeb
          if (vm.tronWeb.ready) { // 正常的情况
            vm.userType = 1
            vm.$store.commit('setUserType', 1)
            vm.tronWeb.on('addressChanged', () => {
              vm.freshUserInfo()
            })
            vm.freshUserInfo()
            clearInterval(timer)
          } else { // 有插件未登录.
            vm.userType = 2
            vm.$store.commit('setUserType', 2)
            return tries++
          }
        }
      }, 100)
    }
  }
</script>

<style lang="less">
  #headers {
    position: relative;
    .close {
      font-size: 22px;
      position: absolute;
      right: 30px;
      top: 30px;
      color: #fff;
      z-index: 99;
    }
    .mining {
      width: 689px;
      height: auto;
      min-height: 400px;
      background: #1D1774;
      overflow: hidden;
      position: relative;
      padding-bottom: 40px;
      > h4 {
        line-height: 40px;
        padding: 35px 0;
        font-size: 28px;
        color: #FFFFFF;
        text-align: center;
      }
      > span {
        font-size: 24px;
        color: #FFF;
        display: block;
        text-align: center;
        padding: 0 20px;
        box-sizing: border-box;
      }
      > p {
        padding: 0 20px;
        font-size: 20px;
        color: #999;
        text-align: center;
        box-sizing: border-box;
        &:nth-child(5) {
          margin: 42px 0 0 40px;
          padding: 0;
          text-align: left;
          font-size: 22px;
          color: #FFFFFF;
        }
        &:nth-child(8) {
          margin: 30px 49px 20px 40px;
          padding: 0;
          text-align: left;
          font-size: 16px;
          color: #F0D2BD;
        }
      }
      .progress-bar {
        position: relative;
        width: 88%;
        margin: 0 auto;
        height: 44px;
        display: block;
        overflow: hidden;
        background: #0A0F55;
        border-radius: 25px;
        margin-top: 40px;
        margin-bottom: 49px;
        > span {
          position: absolute;
          left: 0;
          top: 0;
          width: 60%;
          height: 44px;
          z-index: 998;
          background-image: linear-gradient(-90deg, #F5D7C2 0%, #E1A982 100%);
          border-radius: 22px;
          display: block;
          overflow: hidden;
        }
        > p {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 999;
          width: 100%;
          height: 44px;
          line-height: 44px;
          display: block;
          overflow: hidden;
          font-size: 24px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .video_play {
      width: 689px;
      min-height: 200px;
      overflow: hidden;
      position: relative;
      background: #1D1774;
      video {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .weixin {
      width: 689px;
      height: 462px;
      background: #1D1774;
      overflow: hidden;
      position: relative;
      > img {
        width: 260px;
        height: 257px;
        display: block;
        margin: 40px auto
      }
      > span {
        width: 288px;
        height: 68px;
        font-size: 28px;
        color: #3D1711;
        display: block;
        text-align: center;
        line-height: 68px;
        margin: 8px auto;
        background: #F0D2BD;
        border-radius: 8px;
      }
    }
    .nav_list {
      width: 100%;
      position: absolute;
      z-index: 1000;
      top: 92px;
      left: 0;
      background: #1D1774;
      li {
        overflow: hidden;
        line-height: 96px;
        height: 96px;
        font-size: 30px;
        color: #FFFFFF;
        display: flex;
        justify-items: center;
        div {
          width: 66px;
          height: 66px;
          padding: 18px 11px;
          position: relative;
          img {
            width: 55%;
            height: 55%;
            margin: 15%;
          }
        }
      }
    }
    .header_logo {
      display: flex;
      padding: 19px 24px;
      background: #1D1774;
      justify-content: space-between;
      justify-items: center;
      > span {
        font-size: 30px;
        color: #FFF;
        text-align: center;
        &:nth-child(2) {
          > span {
            font-size: 24px;
            display: block;
          }
        }
        &:nth-child(3) {
          > span {
            font-size: 24px;
            display: block;
          }
        }
      }
      .logo {
        width: 210px;
        height: 55px;
      }
      .logo_right {
        font-size: 36px;
        color: #FFFFFF;
        .en {
          padding-left: 60px;
        }
        .zn {
          color: #F1D487;
        }
        b {
          padding: 19px 0;
          color: #F1D487;
        }
      }
    }
    .lang {
      position: relative;
      top: 10px;
      width: 80px;
      height: 34px;
      .lang-dropdown {
        position: absolute;
        left: -4px;
        top: 30px;
        width: 70px;
        height: auto;
        padding: 10px;
        box-sizing: border-box;
        background: #0A113A;
        display: block;
        overflow: hidden;
        z-index: 9999;
        > li {
          position: relative;
          width: 50px;
          height: 33px;
          display: block;
          overflow: hidden;
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
          > img {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            max-width: 100%;
            max-height: 100%;
            display: block;
            overflow: hidden;
            margin: auto;
          }
        }
      }
      > .active {
        .lang-dropdown {
          display: block;
        }
        .lang-box:after {
          transform: rotate(180deg);
          transition: all 0.5s;
        }
      }
      .lang-box {
        position: relative;
        width: 80px;
        height: 34px;
        &:after {
          position: absolute;
          top: 15px;
          right: 0;
          content: '';
          display: inline-block;
          margin-left: 4px;
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 12px solid #fff;
        }
        > img {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          width: 50px;
          height: 33px;
          display: block;
          overflow: hidden;
        }
      }
    }
    .draw-amount {
      background: rgba(2,12,71,0.60);
      border: 1px solid #F4D6C0;
      border-radius: 4px;
      outline: none;
      width: 394px;
      height: 54px;
      line-height: 54px;
      margin: 9px 10px 47px 41px;
      font-family: PingFangSC-Regular;
      font-size: 18px;
      line-height: 46px;
      padding-left: 10px;
      display: inline-block;
    }
    .btn {
      float: right;
      background: #DBD9D8;
      border-radius: 6px;
      width: 175px;
      height: 54px;
      margin: 18px 35px 0 0;
      font-family: PingFangSC-Regular;
      font-size: 22px;
      color: #646464;
      text-align: center;
      line-height: 54px;
      display: inline-block;
      cursor: pointer;
    }
  }
</style>
